<template>
  <div>
    <div class="back">
      <img class="bg" src="../../assets/bg1.webp" alt="" />

      <el-form
        class="form"
        label-position="left"
        :model="form"
        :rules="rules"
        ref="form"
      >
        <p class="title">Welcome</p>
        <el-form-item prop="uname">
          <el-input
            v-model="form.uname"
            placeholder="请输入管理员账号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input
            v-model="form.pwd"
            type="pwd"
            placeholder="请输入管理员密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="
              width: 100%;
              background-image: linear-gradient(#a52411, #961912, #6d5246);
              border-color: #3a0e0c;
              color: rgba(255, 255, 255, 255);
              font-weight: 700;
            "
            @click="onSubmit()"
            >登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userlist: [],
      form: {
        uname: "",
        pwd: "",
      },
      rules: {
        uname: [
          { required: true, message: "请填写用户名", trigger: "blur" },
          {
            pattern: /^\w{3,15}$/,
            message: "3~15位字符，可以包含：数字、字母、下划线",
            trigger: "blur",
          },
        ],
        pwd: [
          { required: true, message: "请填写用户名", trigger: "blur" },
          {
            pattern: /^\w{6,15}$/,
            message: "6~15位字符，可以包含：数字、字母、下划线",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    onSubmit() {
      // console.log(this.form)
      this.$http.adminApi.login(this.form).then((res) => {
        // console.log(res.data.data)
        this.userlist = res.data.data;
        this.userlist.filter((item) => item.uname == this.form.uname);
        //console.log(this.userlist.filter(item => item.uname == this.form.uname && item.pwd == this.form.pwd))

        let up = this.userlist.filter(
          (item) => item.uname == this.form.uname && item.pwd == this.form.pwd
        );
        if (up.length != 0) {
          this.$store.commit("updateUserInfo", up[0]);
          this.$message({
            type: "success",
            message: "登录成功",
          });

          this.$router.push("/home/index");
        } else {
          this.$message({
            type: "error",
            message: `登录失败`,
          });
        }
      });

      // this.$refs['form'].validate(valid => {
      //   if (valid) { // 验证通过
      //     // 发送登录请求
      //     this.$http.adminApi.login(this.form).then(res => {
      //       console.log('登录请求结果', res)
      //       if (res.data.code == 200) { // 跳转到首页
      //         this.$message({
      //           type: 'success',
      //           message: '登录成功'
      //         })
      //         // 将登录用户存入vuex
      //         this.$store.commit(
      //           'updateUserInfo', res.data.data.user)
      //         this.$store.commit(
      //           'saveToken', res.data.data.token)
      //         // 所有的数据都保存完毕后，跳转到首页
      //         this.$router.push('/home/index')

      //       } else {
      //         this.$message({
      //           type: 'error',
      //           message: `注意：${res.data.msg}`
      //         })
      //       }
      //     })
      //   } else {
      //     this.$message({
      //       type: 'error',
      //       message: '请正确填写表单'
      //     })
      //   }
      // })
    },
  },
};
</script>

<style scoped>
::v-deep .bg {
  display: block;
  position: relative;
  left: 400px;
  /* transform: rotate3d(1, 2, 1, 60deg); */
  /* animation: animate 30s infinite; */
}

.form {
  display: block;
  width: 20%;
  position: absolute;
  top: 30%;
  left: 40%;
}

.form .title {
  text-align: center;
  font-size: 1.5em;
  color: white;
  margin-bottom: 20px;
}

.back {
  height: 100vh;
  /* background-image: linear-gradient(125deg, #e14040, #b050cd, #4842c9, #34828d); */
  /* background: linear-gradient(to right, #333399, #ff00cc); */
  background: rgba(1, 1, 1, 1);
  background-size: 500%;
  /* animation: animate 20s infinite; */
}
</style>